<template>
  <div class="isfilm">
    <div class="swiper-container swiper-container1">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="item in filmdata">
            <router-link to="/" >
            <img  v-bind:src="item.images.large">
            <div class="txt">
              {{item.original_title}}
            </div>
            </router-link>
          </div>
        </div>
    </div>
  </div>
</template>
<script>
  import Swiper from 'swiper';
  import 'swiper/dist/css/swiper.min.css';
  export default {
    name: "isfilm",
    data(){
      return{

      }
    },
    props:{
      filmdata:{
        type:Array,
        required: true
      }
    },
    mounted(){
      var swiper1 = new Swiper('.swiper-container1', {
            slidesPerView: 4,
            paginationClickable: true,
            observer:true,
            observeParents:true,
            spaceBetween: 40,
            autoplay: 4000,
            loop: true
        });
    },
    
  }
</script>
<style scoped>
  .isfilm{
    width: 100%;
    height: 360px;
    margin-top: 20px;
  }
  .swiper-container{
    width: 100%;
    height: 100%;
  }
  .swiper-container .swiper-slide{
    cursor: pointer;
    position: relative;
  }
  .swiper-container .swiper-slide .txt{
    width: 100%;
    height: 34px;
    position: absolute;
    background: rgba(0,0,0,0.7);
    left: 0;
    bottom: 0;
    text-align: center;
    line-height: 34px;
    color: #fff;
    font-size: 14px;
    display: none;

  }
  .swiper-container .swiper-slide:hover .txt{
    display: block;
  }
  .swiper-container .swiper-slide img{
    display: block;
    width: 100%;
    height: 100%;
  }
</style>